<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Progress Bar - Preview</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Progress Bar</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="outer-content">
      <ion-list-header>
        <ion-label>Progress bar output</ion-label>
      </ion-list-header>
      <ion-progress-bar value="0.25" buffer="1" id="bar"></ion-progress-bar>

      <ion-list-header>
        <ion-label>Value</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-range pin="true" value="25" id="progress-value">
          <ion-label slot="start">0</ion-label>
          <ion-label slot="end">100</ion-label>
        </ion-range>
      </ion-item>

      <ion-item>
        <ion-label>Reversed?</ion-label>
        <ion-toggle slot="start" name="reversed" id="progress-reversed"></ion-toggle>
      </ion-item>

      <ion-radio-group id="progress-color" value="primary">
        <ion-list-header>
          <ion-label>Color</ion-label>
        </ion-list-header>

        <ion-item>
          <ion-label>Primary (default)</ion-label>
          <ion-radio value="primary" slot="start"></ion-radio>
        </ion-item>

        <ion-item>
          <ion-label>Secondary </ion-label>
          <ion-radio value="secondary" slot="start"></ion-radio>
        </ion-item>

        <ion-item>
          <ion-label>Tertiary</ion-label>
          <ion-radio value="tertiary" slot="start"></ion-radio>
        </ion-item>
      </ion-radio-group>

      <ion-radio-group id="progress-type" value="determinate">
        <ion-list-header>
          <ion-label>Type</ion-label>
        </ion-list-header>

        <ion-item>
          <ion-label>determinate (default)</ion-label>
          <ion-radio value="determinate" slot="start"></ion-radio>
        </ion-item>

        <ion-item>
          <ion-label>indeterminate </ion-label>
          <ion-radio value="indeterminate" slot="start"></ion-radio>
        </ion-item>
      </ion-radio-group>

      <ion-list-header>
        <ion-label>Set Buffer value</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-range pin="true" value="100" id="progress-buffer">
          <ion-label slot="start">0</ion-label>
          <ion-label slot="end">100</ion-label>
        </ion-range>
      </ion-item>
    </ion-content>

  </ion-app>

  <script>
    const bar = document.getElementById('bar');

    // Update value
    const progressValue = document.getElementById('progress-value');
    progressValue.addEventListener('ionChange', function (ev) {
      bar.value = ev.detail.value / 100;
    });

    // Update buffer value
    const progressBuffer = document.getElementById('progress-buffer');
    progressBuffer.addEventListener('ionChange', function (ev) {
      bar.buffer = ev.detail.value / 100;
    });

    // Set the color of the progress bar
    const progressColor = document.getElementById('progress-color');
    progressColor.addEventListener('ionSelect', (ev) => {
      bar.color = ev.detail.value;
    });

    // Set type of progress bar
    const progressType = document.getElementById('progress-type');
    progressType.addEventListener('ionSelect', (ev) => {
      bar.type = ev.detail.value;
    });

    // Reverse the progress bar
    const progressReversed = document.getElementById('progress-reversed');
    progressReversed.addEventListener('ionChange', function (ev) {
      bar.reversed = ev.detail.checked;
    });

  </script>
</body>

</html>
